<template>
  <div
    :class="[
      $store.state.appPrefix + '-search',
      size ? `${$store.state.appPrefix}-search--${size}` : ``,
      isCollapsed ? 'is-collapsed' : 'is-expanded',
      isBasic ? 'is-basic' : '',
      position === 'left' ? 'is-left' : '',
    ]"
    :style="wapperStyle"
  >
    <div
      :class="[$store.state.appPrefix + '-search__animate-panel']"
      :style="{ width: width + 'px' }"
    >
      <el-input
        v-model.trim="newKeywords"
        :class="[$store.state.appPrefix + '-search__mask-input']"
        :size="size"
        :width="width"
        :disabled="disabled"
        :placeholder="placeholder"
        clearable
        @input="input"
        @change="change"
        @clear="clear"
        @keyup.enter.native="search"
      >
        <!-- <template slot="suffix">
          <i class="el-icon-search" @click="search"></i>
        </template> -->
        <template slot="prefix">
          <i class="el-icon-search"></i>
        </template>
      </el-input>

      <el-autocomplete
        v-model.trim="newKeywords"
        clearable
        :placeholder="placeholder"
        :fetch-suggestions="fetchSuggestions"
        :trigger-on-focus="triggerOnFocus"
        :width="width"
        :size="size"
        :disabled="disabled"
        @change="change"
        @select="search"
        @clear="clear"
        @keyup.enter.native="search"
      >
        <!-- <template slot="suffix">
          <i :class="[searchIconStyle]" @click="search"></i>
        </template> -->
        <template slot="prefix">
          <i :class="[searchIconStyle]"></i>
        </template>

        <!--为拉下选项定义自有格式-->
        <template v-slot:default="{ item }">
          <span>{{ item.value }}</span>
        </template>
      </el-autocomplete>

      <el-button
        v-if="!isBasic"
        :class="[$store.state.appPrefix + '-search__close-btn']"
        :disabled="disabled"
        @click="cancel"
      >
        取消
      </el-button>
    </div>

    <el-button
      icon="el-icon-search"
      :class="[$store.state.appPrefix + '-search__open-btn']"
      :disabled="disabled"
      @click="toggleCollapse"
    ></el-button>
  </div>
</template>

<script>

export default {
  name: 'Search',
  componentName: 'Search',
  props: {
    triggerOnFocus: {
      type: Boolean,
      default: true,
    },
    fetchSuggestions: {
      type: Function,
    },
    defaultKeyword: {
      type: String,
      default: '',
    },
    maxlength: {
      type: Number,
      default: 32,
    },
    placeholder: {
      type: String,
      default: '请输入关键字进行搜索',
    },
    width: {
      type: [Number, String],
      default: 200,
    },
    collapsed: {
      type: Boolean,
      default: false,
    },
    autoCompleted: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: '',
    },
    position: {
      type: String,
      default: 'right',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isBasic: {
      type: Boolean,
      default: false,
    },
    value: [String, Number, Object, Array],
    pattern: {
      type: RegExp,
      default: null,
    }
  },
  data() {
    return {
      isSearch: false,
      isFocus: false,
      newKeywords: '',
      isCollapsed: this.collapsed,
    };
  },

  computed: {
    btnStyle() {
      return 'el-icon-search collapse-search';
    },

    searchIconStyle() {
      return 'el-icon-search';
    },

    wapperStyle() {
      const width = this.width;
      if (this.isBasic) {
        return {
          width: width + 'px',
        };
      }

      return {};
    },
  },

  watch: {
    newKeywords(val) {
      let realValue = val
      const len = val.length
      if (len && this.pattern && !(this.pattern.test(val[len - 1]))) {
        realValue = val.substring(0, len - 1)
        this.newKeywords = realValue
      }
      this.$emit('input', realValue);
    },
    value: {
      handler(val) {
        this.newKeywords = val;
      },
      immediate: true,
    }
  },

  created() {
    this.newKeywords = this.defaultKeyword;
  },

  methods: {
    focus() {
      this.isFocus = true;
    },

    blur() {
      this.isFocus = false;
    },
    change() {
      this.$emit('change', this.newKeywords);
    },

    search() {
      this.$emit('search', this.newKeywords);
    },

    clear() {
      this.$emit('clear', this.newKeywords);
    },

    cancel() {
      this.newKeywords = '';
      this.toggleCollapse();
      this.$emit('cancel', this.newKeywords);
    },

    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>
